import React, { useMemo } from 'react'
import { COLUMNS } from "./columns"
import MOCK_DATA from "./MOCK_DATA.json"
import { useFilters, useGlobalFilter, useTable } from 'react-table'
import "./table.css"
import GlobalFilter from './GlobalFilter'
import ColumnFilter from './ColumnFilter'
const BasicTable = () => {
    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => MOCK_DATA, [])
    const defaultColumn = useMemo(() => ({ Filter: ColumnFilter }), [])
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        footerGroups,
        rows,
        prepareRow,
        setGlobalFilter,
        state
    } = useTable({
        columns, data, defaultColumn
    }, useFilters, useGlobalFilter)
    const { globalFilter } = state
    return (
        <>
            <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}></GlobalFilter>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map(item => (
                                    <th {...item.getHeaderProps()}>
                                        {item.render("Header")}
                                        {item.canFilter ? item.render("Filter") : null}
                                    </th>
                                ))
                            }

                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        rows.map(row => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render("Cell")}</td>)
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
                <tfoot>
                    {footerGroups.map(footGroup => (
                        <tr {...footGroup.getFooterGroupProps()}>
                            {footGroup.headers.map(column => (
                                <td {...column.getFooterProps()}>
                                    {
                                        column.render("Footer")
                                    }</td>
                            ))}
                        </tr>
                    ))}
                </tfoot>
            </table >
        </>
    )
}

export default BasicTable